<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>当前n的值为:{{n}}</h3>
        <button @click="add">点击我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
    //配置了全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
        //    template: `
        //    <div>
        //         <h3>当前n的值为:{{n}}</h3>
        //         <button @click="add">点击我n+1</button>
        //    </div>`,
           data:{
               n: 1
           },
           methods:{
               add(){
                   this.n++;
               },
               bye(){
                   console.log('bye');
                   this.$destroy();//销毁vm的方法
               }
           },
           watch:{
               n(){
                   console.log("n变了");
               }
           },
           beforeCreate() {
               console.log('beforeCreate');
               //debugger;//卡一个端点，调试的正确方式
           },
           created() {
               console.log('created');
               //debugger;
           },
           beforeMount() {
            console.log('beforeMount');
           },
           mounted() {
               console.log('mounted');
           },
           beforeUpdate() {
               console.log('beforeUpdate');
           },
           updated() {
               console.log('updated');
           }
        });
    </script>
</body>

</html>